<template>
    <div class="view-fill">
      <div class="app-container-flex">
        <NewFullScreen
          v-model="showDialog"
          :title="title"
          :btn-list="fullInfo.btnList"
          @returnBack="$emit('returnModify')"
        >
          <div class="model-panel">
            <div class="model-panel-title">
              <p>{{ $t("basic_information") }}</p>
            </div>
            <div class="model-panel-body">
              <page-form
                class="paddingBox order-model-formBox flex_wrap_start_start"
                v-model:ref-obj="formInfo.ref"
                :data="formInfo.data"
                :field-list="formInfo.fieldList"
                :label-width="formInfo.labelWidth"
                :rules="formInfo.rules"
              >
               <template v-slot:form-deptName>
                  <el-input
                    v-model="formInfo.data.deptName"
                    class="not-mongolia"
                    type="input"
                    :required="true"
                    :disabled="true"
                    :placeholder="'请选择部门'"
                  >
                    <template #append>
                      <el-icon @click="checkDeptName"><MoreFilled /></el-icon>
                    </template>
                  </el-input>
                </template>
                <template v-slot:form-reportFileUrlList>
                <UploadImg
                  v-model:value="formInfo.data.reportFileUrlList"
                  :action="action"
                  list-type="picture-card"
                  title="附件"
                  multiple
                  :limit="10"
                  :file-type="fileType"
                  :response-fn="handleResponse"
                />
              </template>
              </page-form>
            </div>
          </div>
        </NewFullScreen>
      </div>
      <!-- 选择部门 -->
      <SelectDept
        v-if="useDeptInfo.visible"
        v-model:show-dialog="useDeptInfo.visible"
        :check-box="false"
        :highlight-row="true"
        :query="useDeptInfo.query"
        :save-empty="true"
        @callback="callbackUseDept"
      />
    </div>
  </template>
  
  <script setup name="deviceTrialManageModify">
  import PageForm from "@/components/PageForm/index";
  import { completeTrial, getTrialById } from "@/api/asset.js";
  import moment from "moment";
  import utils from '@/common/js/utils'
  const { proxy } = getCurrentInstance();
  const emit = defineEmits();
  import axios from 'axios'
  const props = defineProps(["visible", "id", "title"]);
  const action = ref(axios.defaults.baseURL + '/pub/uploadfile')
  const fileType = ref(['png', 'jpg', 'jpeg','pdf'])
  const formInfo = ref({
    ref: null,
    data: {},
    fieldList: [
    //   { label: "试用科室",value: "deptName",type: "slot"},
      { label: "试用开始日期", value: "trialStartDate", type: "date", disabled: true },
      { label: "试用截止日期", value: "trialEndDate", type: "date", disabled: true },
      { label: "设备名称", value: "assetName", type: "input", disabled: true },
      { label: "规格", value: "standard", type: "input", disabled: true },
      { label: "序列号", value: "sequenceNo", type: "input", disabled: true },
      { label: "注册证号", value: "registerCode", type: "input" , disabled: true},
      { label: "生产厂家", value: "brandName", type: "input", disabled: true },
      { label: "生产日期", value: "productionDate", type: "date", disabled: true },
      { label: "供应商", value: "supplierName", type: "input" ,maxLength: 32, disabled: true},
    //   { label: "安装日期", value: "installDate", type: "date", disabled: true },
    //   { label: "安装地点", value: "installLocation", type: "input", disabled: true },
      { label: "联系人", value: "contact", type: "input" , disabled: true},
      { label: "联系电话", value: "phone", type: "input", disabled: true },
      { label: "试用情况说明", value: "trialCondition", type: "textarea",className: 'not-br', maxLength: 2000 },
      { label: "试用建议", value: "trialSuggest", type: "textarea", className: 'not-br',maxLength: 2000 },
      { label: "附件", value: "reportFileUrlList",type: 'slot',
        className: 'not-br', },
  
    ],
    rules: {
        trialCondition: [
        { required: true, message: "请输入试用情况说明", trigger: "blur" },
      ],
      trialSuggest: [
        { required: true, message: "请输入试用建议", trigger: "blur" },
      ],
    },
    labelWidth: "180px",
  });
  const fullInfo = ref({
    btnList: [{ label: "保存", event: save, show: true }],
  });
  
  const showDialog = computed({
    get() {
      return props.visible;
    },
    set(newValue) {
      emit("update:visible", newValue); // 更新父组件visible
    },
  });
  const useDeptInfo = ref({
    visible: false,
    query: {
      status: 1,
      deptAuth: 'id',
    },
  })
  onMounted(() => {
    if (props.id) {
      getDetails();
    }
  });
  function handleResponse(response, file) {
    return file
  }
  function checkDeptName() {
    useDeptInfo.value.visible = true
  }
  
  function callbackUseDept(data) {
    if (data && data.id) {
      formInfo.value.data.deptName = data.name
      formInfo.value.data.deptId = data.id
    } else {
      formInfo.value.data.deptName = ''
      formInfo.value.data.deptId = -2
    }
  }
  function saveAndSubmit(flowData) {
    save(true, flowData)
  }
  function save(isSaveAndSubmit) {
    formInfo.value.ref.validate((valid) => {
      if (valid) {
        let api =  completeTrial;
        api(formInfo.value.data).then((res) => {
          if (res && res.success) {
            showDialog.value = false
            emit('returnModify')
          }
        });
      }
    });
  }
  function getDetails() {
    getTrialById(props.id).then((resp) => {
      if (resp && resp.success) {
        let data = resp.data;
        formInfo.value.data = data;
      }
    });
  }
  </script>
  
  <style scoped lang="scss">
  .flex {
    display: flex;
    // flex: 1;
  }
  .flex-select :deep(.el-input--small .el-input__inner) {
    height: 28px !important;
  }
  :deep(.patrolPlan-checkbox) {
    padding: 0 5px 5px 5px;
    box-sizing: border-box;
    .el-checkbox-button__inner {
      width: 30px;
      height: 30px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  :deep(.el-checkbox-button__inner) {
    border: 1px solid #dcdfe6 !important;
  }
  </style>
  